<script>
import {axiosAddNewLike, axiosGetComments, axiosGetPersonInfo, axiosGetPostDetails, axiosNewComments} from "../api";

  export default {
    name:"detailsPosts",
    data(){
      return{
        username:"",
        post:this.$route.query.post,
        postText:"",
        commentList:[],
        commentText:"",
        total:1,
        page:1
      }
    },
    beforeMount() {
      this.getPostDetails();
      this.getPersonInfo();
      this.getComments();
    },
    methods:{
      async getPersonInfo(){
        let result = await axiosGetPersonInfo({account: this.account, password: this.password})
        if (result.status === 200){
          this.username = result.data.userName;
        }
      },
      async getPostDetails(){
        let result = await axiosGetPostDetails({id:this.post.id});
        if (result.status === 200){
          this.postText = result.data.text;
        }
      },
      async getComments(){
        let result = await axiosGetComments({id:this.post.id,offs:(this.page-1)*10,number:10})
        if (result.status === 200){
          this.commentList = result.data;
          try {
            if (this.commentList[0].postCommentCount > 0) {
              this.total = result.data.postCommentCount;
            }
          }catch (e) {
            console.log(e.message)
          }
        }
      },
      newComment(){
        axiosNewComments({id:this.post.id,account:this.account,username:this.username,text:this.commentText})
      },
      back(){
        this.$router.push({name:"publicPosts"});
      },
      likeClick() {
        axiosAddNewLike({id:this.post.id,account:this.account})
      },
      getPageNum(value) {
        this.page = value;
        this.getComments();
      }
    },
  }
</script>

<template>
  <div id="detailsPosts">
    <div class="middle-box">
      <div class="title">
        <el-button @click="back">返回</el-button>
        <p>帖子内容</p>
        <p>{{post.title}}</p>
        <p>{{postText}}</p>
        <p @click="likeClick">{{post.likeNum}}</p>
        <el-input v-model="commentText" placeholder="请输入内容"></el-input>
        <el-button @click="newComment">发表评论</el-button>
      </div>
      <div class="comment">
        <ul class="infinite-list">
          <li v-for="comment in commentList" class="infinite-list-item" style="margin-top:20px">
            <div class="comment-style">
              <p @click="otherClick(post)">{{comment.username}}</p>
              <p @click="postClick(post)">{{comment.textInfo}}</p>
            </div>
          </li>
        </ul>
      </div>
      <el-pagination
          :hide-on-single-page="true"
          :total="total"
          background
          layout="prev, pager, next"
          @current-change="getPageNum">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped src="../style/details-posts.css">

</style>